<!-- 服务（会员专用，看到平台提供的一些收费服务项目） -->
<template>

	<view class="service-item-con">
		<cu-custom bgColor="bg-E96141" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">服务项目</block>
		</cu-custom>
	
		<!-- 分页数据 -->
		
		
		<view class="no-data-con"
			v-if="!pageDataList || pageDataList.length==0">
			<image src="https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/empty.png"></image>
			<view class="title">暂无服务项目~</view>
		</view>
		
		<scroll-view class="VerticalMain" scroll-y 	scroll-with-animation @scrolltolower="handleScrolltolower()">
			<view class="pages-con" v-if="pageDataList && pageDataList.length>0">		
				<view v-for="(item, index) in pageDataList" :key="item.id"	class="item">
					<view class="image-wrapper">
						<image :src="item.coverImage" ></image>
					</view>
					<view class="text-con">
						<text class="title clamp">{{item.title}}</text>
						<view class="price-box">
							<text class="price">{{item.ylbprice}}</text>
							<!-- <text class="sale-count">累计服务{{item.totalsalecount<=0?1:item.totalsalecount}}</text> -->
						</view>
						<view class="oper-con">
							<button class="cu-btn bg-cyan round yu-yue-btn"
								@tap="orderServiceItem(item)"><text space="emsp">现在支付</text>
							</button>
							<button class="cu-btn bg-orange round kefu-btn"
								@tap="onlineKefu()"><text space="emsp">客服</text>
							</button>
						</view>
					</view>
					
				</view>
		</view>
		</scroll-view>
		<uni-load-more
			v-if="pageDataList && pageDataList.length>0"
			:status="loadingType"></uni-load-more>
	
	</view>
</template>

<script>
	import {
		USER_HAS_LOGIN,
		USER_IDENTITY,
		COMPANY_KEFU_PHONE1,
	} from "@/common/util/constants"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	
	export default {
		name: "serviceItem",
		components: {
			uniLoadMore	
		},
		props:{
			pageCur: String,
		},
		data() {
			return {
				userIdentity: '',
				
				loadingType: 'more', //加载更多状态
				filterIndex: 0, 
				pageDataList: [],
				
				keyword: '',
				currPageNo: 1,
				totalPageNo: 1,
				pageSize: 10,
			}
		},
		created() {
			this.validUserInfo()
			this.loadData()
		},
		methods: {
			// 用户信息
			validUserInfo(){
				this.userIdentity = uni.getStorageSync(USER_IDENTITY)
				if(this.userIdentity!='0'){
					this.$tip.cyToast('仅对会员开放')
					return false
				}
				
				this.userHasLogin = uni.getStorageSync(USER_HAS_LOGIN)
				if(this.userHasLogin!='1'){
					this.$tip.toast('登录超时');
					let app_must_permission_status = uni.getStorageSync('APP_MUST_PERMISSION_STATUS')
					uni.clearStorageSync();
					uni.setStorageSync('APP_MUST_PERMISSION_STATUS', app_must_permission_status)
					setTimeout(function() {
						uni.redirectTo({
						    url: '/pages/login/login'
						});
					}, 500);
					return false
				}
			},
			//上拉触底事件
			handleScrolltolower(e) {
			
				console.log('55555555555555555555555')
				if(this.loadingType=='more'){
					this.loadData()
				}
			},
			// 滚动事件
			handleScroll(e) {
			},
			//下拉刷新
			onPullDownRefresh(){
				console.log('444444444444444')
				this.loadData('refresh');
			},
			//加载更多
			onReachBottom(){
				this.loadData();
				console.log("触底加载更多")
			},
			//分页加载 ，带下拉刷新和上滑加载
			async loadData(type='add', loading) {
				let that = this
				//没有更多直接返回
				if(type === 'add'){
					if(that.loadingType === 'nomore'){
						return;
					}
					that.loadingType = 'loading';
				}else if(type === 'refresh'){
					that.pageDataList = []
					that.currPageNo = 1
				}else{
					that.loadingType = 'more'
				}
				if(that.currPageNo>that.totalPageNo){
					that.loadingType = 'nomore'
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
					return false
				}
				
				let _pageParams = {
					pageNo: that.currPageNo,
					pageSize: that.pageSize,
				}
				uni.showLoading({
					title: '加载中..',
					mask: true,
				})
				let list = await that.$http.get('/prodservicev2/prodservicev2/list', {params:_pageParams})
					.then(res => {
						if(res.data.success){
							uni.hideLoading()
							let jsonData = res.data.result
							if(!jsonData){
								return []
							}
							that.totalPageNo = jsonData.pages
							let _list = jsonData.records?jsonData.records:[]
							return _list
						}else{
							uni.hideLoading()
						}
					}).catch(err => {
						uni.hideLoading()
						return []
					});
				
				if(list && list.length>0){
					list.forEach(item=>{
						that.pageDataList.push(item)
					})
				}
				
				//判断是否还有下一页，有是more  没有是nomore
				that.loadingType  = (that.currPageNo >= that.totalPageNo)?'nomore':'more'
				if(type === 'refresh'){
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
				
				if(that.currPageNo<that.totalPageNo){
					that.currPageNo++
				}
			},
			stopPrevent(){
			},
			//在线客服
			onlineKefu(){
				uni.showLoading({
					title: '调度中..',
					mask: true,
				})
				let that = this
				that.$http.get("/onlineservice/wxkf/list", {}).then(res=>{
					if(res.data.success){
						uni.hideLoading()
						/*返回数据结构, 是个数组, 取第一个即可
							[
								{
									groupId: "ww5f63ceded24818ab"
									url: "https://work.weixin.qq.com/kfid/kfcc5d6030bea412d37"
								}
							]
						*/
						let jsonData = res.data.result.records
						if(!jsonData || jsonData.length<1){
							that.$tip.cyToast('微信客服参数错误')
							return false
						}
						if(!jsonData[0].groupId || !jsonData[0].url){
							that.$tip.cyToast('微信客服参数错误')
							return false
						}
						
						// #ifdef APP-PLUS
						let weiXinKefuInfo = {
							corpid: jsonData[0].groupId,
							kefuUrl: jsonData[0].url,
						}
						that.openWeiXinKefu(weiXinKefuInfo)
						// #endif
					}else{
						uni.hideLoading()
						that.$tip.cyToast('坐席繁忙，请稍后再试');
					}
				}).catch(err => {
					uni.hideLoading()
				});
			},
			//接入微信客服
			openWeiXinKefu(weiXinKefuInfo){
				// #ifdef APP-PLUS
				if(!weiXinKefuInfo || !weiXinKefuInfo.corpid || !weiXinKefuInfo.kefuUrl){
					this.$tip.cyToast('微信客服参数错误')
					return false
				}
				
				let sweixin = null
				plus.share.getServices(res=>{
					sweixin = res.find(i => i.id === 'weixin')
					if(sweixin){
						sweixin.openCustomerServiceChat({
							//微信客服-企业ID
							corpid: weiXinKefuInfo.corpid,    	
							//微信客服-某个客服的URL
							url: weiXinKefuInfo.kefuUrl,
						},suc=>{
							//console.log("success",JSON.stringify(res))
						},err=>{
							//console.log("error",JSON.stringify(err))
						})
					}else{
						plus.nativeUI.alert('当前环境不支持微信操作!')
					}
				},function(){
					uni.showToast({title: "获取服务失败，不支持该操作。"+JSON.stringify(e), icon: 'error'})
				})
				// #endif
				// #ifndef APP-PLUS
				window.location.href = "https://work.weixin.qq.com/kfid/kfcc5d6030bea412d37"
				// #endif
			},
			//现在支付
			orderServiceItem(item){
				if(this.userIdentity!='0'){
					this.$tip.toast('仅对会员开放');
					return false;
				}
				if(!item){
					this.$tip.cyToast('参数错误')
					return false
				}
				/*单条服务项目, 后台返回数据
					{
						coverImage: "https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/service-item-v2-wkcx.jpg"
						description: "专业护士提供上门拆线服务，包括检查伤口，清洁，消毒，拆线服务；80元/次"
						id: "1485141764056096769"
						price: "80"
						title: "外科拆线"
						ylbprice: "80"
					}
				*/
				let modalTitle = item.title
				let modalContent = '建议先在线客服沟通再行预约！\n'
				//orderType: 订单类型(0-会员充值场景, 1-会员按次消费服务项目)
				let nextPageParams = '?nouse=0' + 
					'&orderType=1' + 
					'&serviceItemId=' + item.id
				if(item.description){
				   //服务项目有详情, 则先给会员展示
				   modalContent += item.description
				   uni.showModal({
						title: modalTitle,
						content: modalContent,
						confirmText: '立即下单',
						confirmColor: '#E96141',
						cancelColor: '#999999',
						success: (res) => {
							if (res.confirm) {
								//点击-确定
								uni.navigateTo({
									url: '/pages/order/submit-order' + nextPageParams
								})
							}else{
								//点击-取消
							}
						}
				   })
			   }else{
				   //项目没有详情说明
				   uni.showModal({
						title: modalTitle,
						content: modalContent,
						confirmText: '立即下单',
						success: (res) => {
							if (res.confirm) {
								//点击-确定
								uni.navigateTo({
									url: '/pages/order/submit-order' + nextPageParams
								})
							}else{
								//点击-取消
							}
						}
				   })
			   }
			},
		}
	}
</script>

<style lang="scss" scoped>
.service-item-con{
	padding-bottom:100upx;
	.deco-1{
		width: 100%;
	}
}
/* 分页 */
.no-data-con{
	text-align: center;
	padding: 30% 0 0 0;
	image{
		width: 150px !important;
		height: 150px !important;
	}
	.title{
		color: #aaaaaa;
	}
}
.pages-con{
	display:flex;
	flex-wrap:wrap;
	padding: 20upx;
	.item{
		display:flex;
		flex-direction: column;
		width: 48%;
		overflow: hidden;
		background-color: #fff;
		margin-bottom: 25upx;
		border-radius: 15upx;
		border: 1px solid #ececec;
		&:nth-child(2n+1){
			margin-right: 4%;
		}
	}
	.image-wrapper{
		width: 100%;
		height: 330upx;
		/* border-radius: 10upx; */
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.text-con{
		padding: 15upx;
		.title{
			/* text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden; */
			font-size: $uni-font-size-lg;
			color: $uni-text-color;
			height: 50upx;
			line-height: 50upx;
			overflow: hidden;
			border: 0px solid #f00;
			margin: 10upx 0;
		}
		.price-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10upx;
			margin-top: 10upx;
			font-size: 24upx;
			color: $uni-text-color-grey;
			.price{
				color: $uni-color-dc4c47;
				line-height: 36upx;
				font-size: 36upx;
				font-weight: bold;
				&:before{
					content: '￥';
					font-size: 20upx;
				}
				&:after{
					content: ' / 次';
					font-size: 20upx;
				}
			}
			.sale-count{
				font-size:$uni-font-size-sm;
				color: #999999;
				line-height: 1;
				&:after{
					content: '次';
				}
			}
		}
		.oper-con{
			font-size: 26upx;
			margin: 15upx 0 0 0;
			.yu-yue-btn{
				float: right;
			}
			.kefu-btn{
			}
		}
	}
	
}
</style>
